<template>
  <!-- 设置页面高度为100vh，位置为相对定位 -->
  <div style="height: 100vh; position: relative">
    <!-- 全局化配置 Config Provider 全局化配置设置内部组件的主题、语言和组件卸载于其他位置的 DOM 的类名 -->
    <!-- :locale="zhCN" :date-locale="dateZhCN" 语言和时间全局设置为中文 -->
    <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
      <!-- 提供全局对话框 -->
      <n-dialog-provider>
        <!-- Vue Starport：跨路由共享组件的动画神器 -->
        <StarportCarrier>
          <!-- 配置所有通知所在的位置 -->
          <n-notification-provider placement="top">
            <!-- 提供全局加载条 -->
            <n-loading-bar-provider>
              <!-- 提供全局消息 -->
              <n-message-provider>
                <!-- 根据主题设置配置 -->
                <n-config-provider :theme="isdarkTheme ? darkTheme : null">
                  <!-- 布局组件，位置为绝对定位 -->
                  <n-layout position="absolute">
                    <!-- 引入头部组件，并绑定 goPath 事件 -->
                    <Header @goPath="goPath"></Header>
                    <!-- 布局组件，包含侧边栏，位置为绝对定位，顶部距离64px -->
                    <n-layout has-sider position="absolute" style="top: 64px;">
                      <!-- 滚动条组件，绑定滚动事件 -->
                      <n-scrollbar ref="scrollbarRef" @scroll="scroll">
                        <!-- 内容组件 -->
                        <Content ref="scrollbarRef2">
                          <!-- 路由视图，使用 keep-alive 缓存组件 -->
                          <RouterView v-slot="{ Component }">
                            <keep-alive>
                              <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
                            </keep-alive>
                            <component :is='Component' v-if='!$route.meta.keepAlive' :key='$route.name' />
                          </RouterView>
                        </Content>
                        <!-- 底部组件，条件渲染 -->
                        <Footer v-if="showLoading"></Footer>
                        <!-- 返回顶部组件，右侧距离30px -->
                        <n-back-top :right="30"/>
                      </n-scrollbar>
                    </n-layout>
                  </n-layout>
                </n-config-provider>
              </n-message-provider>
            </n-loading-bar-provider>
          </n-notification-provider>
        </StarportCarrier>
      </n-dialog-provider>
    </n-config-provider>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, nextTick, provide } from "vue"
import { StarportCarrier } from "vue-starport";
// @ts-ignore
import Header from "./Layout/components/Header.vue";
// @ts-ignore
import Content from "./Layout/components/Content.vue";
import Footer from "./Layout/components/Footer.vue";
import { VaeStore } from './store'
import { useRouter } from 'vue-router'
import { storeToRefs } from "pinia";
import { darkTheme, useMessage } from 'naive-ui'
import { zhCN, dateZhCN } from 'naive-ui'

// 创建 store 实例
const store = VaeStore();
// 创建 ref 实例，保存滚动条元素
const scrollbarRef2 = ref<HTMLElement | undefined>(undefined);
// 引入 dark 模式相关函数
import { useDark, useToggle } from '@vueuse/core'
// 创建 ref 实例，控制加载状态
const showLoading = ref(false);
// 使用 dark 模式
const isDark = useDark()
// 切换 dark 模式
const toggleDark = useToggle(isDark)

// 设置定时器，500ms 后显示加载状态
setTimeout(() => {
  showLoading.value = true;
}, 500)

// 解构 store 中的 isdarkTheme
let { isdarkTheme } = storeToRefs(store);

// 创建 ref 实例，保存滚动条元素
const scrollbarRef = ref<any>(null);

// 滚动事件处理函数
const scroll = (e: any) => {
  nextTick(() => {
    const distanceToBottom = e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight;
    store.setdistanceToBottom(distanceToBottom);
    store.setdistanceToTop(e.target.scrollTop);
  })
}

// 滚动到指定位置
const scrollByTop = (x: number) => {
  scrollbarRef.value.scrollTo({
    top: x,
  });
};

// 传递滚动函数给子组件
provide('scrollBy', scrollByTop)

// 生命周期钩子，组件挂载时执行
onMounted(() => {
  getWindowResize()
  window.addEventListener('resize', getWindowResize)
})

// 获取屏幕尺寸
const getWindowResize = function () {
  store.setclientWidth(window.innerWidth);
  store.setclientHeight(window.innerHeight);
  // 刚进入页面的时候清空本地存储
  
}

// 使用路由实例
const $r = useRouter();

// 跳转页面函数
const goPath = (key: string) => {
  console.log(`goPath 跳转页面`)
  $r.push({ name: key })
}

</script>

<style lang="less">
// 样式定义
#darkComment {
  .u-comment {
    background: none !important;
  }
}
[v-cloak] {
  display: none;
}


</style>
